<template>
  <div>
    <header>
      <a class="logo" href="#/"></a>
      <div>
        <p class="welcome">欢迎登录</p>
      </div>
      <div>
        <a class="goHome" href=""
          >进入网站首页
          <i class="el-icon-arrow-right"></i>
          <i class="el-icon-arrow-right"></i>
        </a>
      </div>
    </header>
    <section>
      <div class="loginBox">
        <div>
          <i class="el-icon-user"></i
          ><input type="text" v-model="account" placeholder="请输入用户名" />
        </div>
        <div>
          <i class="el-icon-lock"></i
          ><input type="password" v-model="password" placeholder="请输入密码" />
        </div>
        <button @click="loginFn">登录</button>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: "admin",
      password: "123456",
    };
  },
  methods: {
    async loginFn() {
      let data = {
        account: this.account,
        password: this.password,
      };
      let res = await this.$http.login(data);
      if (res.status == 200) {
        // localStorage.setItem("token", res.data.result.token);
        this.$store.dispatch("login/getlogin", res.data.result.token);
        this.$router.push("/");
      } else {
        console.log("失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .logo {
    width: 200px;
    height: 132px;
    background: url("http://erabbit.itheima.net/img/logo.0940ebb5.png") center
      no-repeat;
    background-size: contain;
  }

  .goHome {
    font-size: 14px;
    margin-bottom: 40px;
    display: inline-block;
  }

  .welcome {
    width: 900px;
    margin: 0 0 40px 20px;
    display: inline-block;
  }
}

section {
  width: 100%;
  height: 488px;
  background: url("http://erabbit.itheima.net/img/login-bg.696efec3.png")
    no-repeat 50% / cover;
  position: relative;

  .loginBox {
    width: 380px;
    background: #fff;
    min-height: 400px;
    position: absolute;
    left: 50%;
    top: 54px;
    transform: translate3d(100px, 0, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    padding: 40px;
    box-sizing: border-box;

    div {
      display: flex;
      margin: 20px 0;
    }

    i {
      width: 34px;
      height: 34px;
      background: #cfcdcd;
      color: #fff;
      text-align: center;
      line-height: 34px;
      font-size: 18px;
    }

    input {
      font-size: 20px;
      width: 100%;
      height: 34px;
      border: 0;
      outline: none;
      text-indent: 10px;
    }

    button {
      display: block;
      width: 100%;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      background: #27ba9b;
      border: 0;
      cursor: pointer;
    }
  }
}
</style>